/*
 * @Author: liuxinye
 * @Date: 2022-01-17 18:18:03
 * @LastEditors: liuxinye
 * @LastEditTime: 2022-08-08 16:57:25
 * @Description: 主流程
 */
<script setup lang="ts">
import { onMounted } from 'vue';
import {Scene , PerspectiveCamera, WebGLRenderer, BoxGeometry, MeshBasicMaterial, Mesh} from 'three'
onMounted(()=>{
    //创建场景
    const scene = new Scene();
    //创建相机(透视相机)
    let camera=new PerspectiveCamera(60,window.innerWidth/window.innerHeight,0.1,1000);
    //创建渲染器
    const renderer= new WebGLRenderer();
    renderer.setSize(window.innerWidth,window.innerHeight);
    (document.getElementById('canvas') as HTMLElement).appendChild(renderer.domElement);
    //创建立方体对象
    const geometry=new BoxGeometry(1.5,1.5,1.5);
    //创建材质对象，包含了立方体所有的顶点和面
    const meterials:Array<MeshBasicMaterial>=[
      new MeshBasicMaterial({color:0x464678,}),
      new MeshBasicMaterial({color:0xC84678}),
      new MeshBasicMaterial({color:0xC87878}),
      new MeshBasicMaterial({color:0x7846C8}),
      new MeshBasicMaterial({color:0x3C46C8}),
      new MeshBasicMaterial({color:0x5096C8}),
    ];
    //创建网格对象，组合立方体和材质
    const cube=new Mesh(geometry,meterials);
    //将完整立方体添加到场景中去
    scene.add(cube);
    //设置相机位置
    camera.position.z=6;
    //动画渲染
    function animate(){
        requestAnimationFrame(animate);
        // cube.rotation.x += 0.01;
        cube.rotation.y += 0.01;
        cube.rotation.z += 0.01;
        renderer.render(scene,camera);
    }
    animate()
})



</script>
<template>
  <div id="canvas"></div>
</template>
<style lang="scss" scoped>

</style>
